import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, Picker } from '@tarojs/components'
import './index.scss'
//新增收获地址页面
import { AtIcon, AtRate, AtTextarea, AtButton, AtTabBar, AtTabs, AtTabsPane, AtInput, AtForm, AtImagePicker } from 'taro-ui'
export default class Index extends Component {

  config = {
    navigationBarTitleText: '投诉',
    navigationBarBackgroundColor: '#6381F7',
    // navigationBarTitleText: 'WeChat',
    navigationBarTextStyle: 'white'
  }

  constructor(props) {
    super(props)
    this.state = {
      value: 5,
      current: 2,
      selector: ['匿名投诉', '实名投诉'],
      selectorChecked: '匿名投诉',
      selector1: ['瓶库无标识区分', '钢瓶未分区码放'],
      selectorChecked1: '瓶库无标识区分',
      files: []
    }

  }



  componentWillMount() { }

  componentDidMount() { }


  handleClick(value) {
    this.setState({
      current: value
    })
    console.log(value)
    if (value == 0) {
      Taro.redirectTo({
        url: '../index/index'
      })
    }

    if (value == 1) {
      Taro.redirectTo({
        url: '../index.4/index'
      })
    }


  }

  onChangePicker = e => {
    this.setState({
      selectorChecked: this.state.selector[e.detail.value]
    })
  }

  handleChange(value) {
    this.setState({
      value
    })
  }

  onChange(files) {
    this.setState({
      files
    })
  }
  onFail(mes) {
    console.log(mes)
  }
  onImageClick(index, file) {
    console.log(index, file)
  }

  render() {
    const tabList = [{ title: '我要投诉' }, { title: '我的投诉' }]
    console.log(this.state.selectorChecked)

    return (
      <View className='index'>
        <AtTabs current={0} tabList={tabList} tabDirection='horizontal' >
          <AtTabsPane current={0} index={0} className='AtTabsPane' >
            <View className='picker'>
              <Picker mode='selector' range={this.state.selector} onChange={this.onChangePicker}>
                <Text style={{ float: "left", marginLeft: "20px" }}>投诉类型</Text><View style={{ float: "right", marginRight: "20px" }}>{this.state.selectorChecked}<AtIcon value='chevron-right' size='20' color='#ccc'></AtIcon></View>
              </Picker>
            </View>

            <View className='picker'>
              <Picker mode='selector' range={this.state.selector1} onChange={this.onChangePicker}>
                <Text style={{ float: "left", marginLeft: "20px" }}>违规行为</Text><View style={{ float: "right", marginRight: "20px" }}>{this.state.selectorChecked1}<AtIcon value='chevron-right' size='20' color='#ccc'></AtIcon></View>
              </Picker>
            </View>

            <View>
              {
                this.state.selectorChecked == '实名投诉' &&
                <AtForm>
                <AtInput
                  name='value1'
                  title='站点名称'
                  type='text'
                  placeholderStyle="float:right"
                  placeholder='请输入站点名称'
                  value={this.state.value1}
                  onChange={this.handleChange.bind(this)}
                />
                <AtInput
                  name='value2'
                  title='站点位置'
                  type='number'
                  placeholder='请输入地址'
                  value={this.state.value2}
                  onChange={this.handleChange.bind(this)}
                />
                <AtInput
                  name='value3'
                  title='详细地址'
                  type='password'
                  placeholder='请输入详细地址'
                  value={this.state.value3}
                  onChange={this.handleChange.bind(this)}
                />
                <AtInput
                  name='value3'
                  title='联系人'
                  type='password'
                  placeholder='请输入姓名'
                  value={this.state.value3}
                  onChange={this.handleChange.bind(this)}
                />
                <AtInput
                  name='value3'
                  title='联系方式'
                  type='password'
                  placeholder='请输入联系方式'
                  value={this.state.value3}
                  onChange={this.handleChange.bind(this)}
                />
              </AtForm>
               
              }
              {
                this.state.selectorChecked == '匿名投诉' &&
                <AtForm>
                <AtInput
                  name='value1'
                  title='站点名称'
                  type='text'
                  placeholderStyle="float:right"
                  placeholder='请输入站点名称'
                  value={this.state.value1}
                  onChange={this.handleChange.bind(this)}
                />
                <AtInput
                  name='value2'
                  title='站点位置'
                  type='number'
                  placeholder='请输入地址'
                  value={this.state.value2}
                  onChange={this.handleChange.bind(this)}
                />
                <AtInput
                  name='value3'
                  title='详细地址'
                  type='password'
                  placeholder='请输入详细地址'
                  value={this.state.value3}
                  onChange={this.handleChange.bind(this)}
                />
              </AtForm>

              }
             
            </View>

            <AtTextarea

              onChange={this.handleChange.bind(this)}
              maxLength={200}
              placeholder='具体描述'
            />

            <AtImagePicker
              files={this.state.files}
              onChange={this.onChange.bind(this)}
              className='AtImagePicker'
            />
              <View>
              <AtButton type='primary' className='AtButton'>提交</AtButton>

              </View>
             





          </AtTabsPane>
          <AtTabsPane current={1} index={1}>
            <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;' >标签页一的内容</View>
          </AtTabsPane>

        </AtTabs>
        <AtTabBar
          fixed
          tabList={[
            { title: '订购', iconType: 'shopping-cart', text: 'new' },
            { title: '订单', iconType: 'shopping-bag', text: '100', max: '99' },
            { title: '投诉', iconType: 'mail' },
            { title: '我的', iconType: 'user', text: '100', max: '99' }
          ]}
          onClick={this.handleClick.bind(this)}
          current={this.state.current}
        />

      

      </View>
    )
  }
}

